<template>
  <div class="app-container">
    <div class="userinfo-list-view">
      <el-table :data="tableData3"
                border
                style="width: 100%"
                :row-key="tableData3.user_id">
        <el-table-column prop="user_id"
                         label="ID"
                         width="50">
        </el-table-column>
        <el-table-column prop="user_pic"
                         label="头像"
                         width="120">
          <template slot-scope="scope">
            <el-card :body-style="{ padding: '0px'}">
              <img :src="'http://127.0.0.1:3000/uploads' + scope.row.user_pic.toString()"
                   class="image"
                   v-if="scope.row.user_pic !== null"
                   style="width: 100px;">
            </el-card>
          </template>
        </el-table-column>
        <el-table-column prop="username"
                         label="账号"
                         width="150">
        </el-table-column>
        <el-table-column prop="nickname"
                         label="昵称"
                         width="150">
        </el-table-column>
        <el-table-column prop="email"
                         label="邮箱"
                         width="150">
        </el-table-column>
        <el-table-column prop="sex"
                         label="性别"
                         width="60">
          <template slot-scope="scope">
            <el-tag size="mini"
                    v-if="scope.row.sex === 1">男</el-tag>
            <el-tag size="mini"
                    v-else-if="scope.row.sex === 2">女</el-tag>
            <el-tag size="mini"
                    v-else>未知</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="user_biography"
                         label="用户简介">
        </el-table-column>
        <el-table-column prop="other_info"
                         label="其他信息"
                         width="100">
          <template slot-scope="scope">
            <el-popover ref="popover4"
                        placement="left"
                        width="200"
                        trigger="hover">
              <div style="text-align: center; font-weight: 700;">
                <p>
                  <span>余额: {{ scope.row.money }}</span>
                  <span style="padding-left: 20px">信用点: {{ scope.row.credit }}</span>
                </p>
                <p>
                  <span>项目数: {{ scope.row.project_num }}</span>
                  <span style="padding-left: 20px">委托数: {{ scope.row.entrust_num }}</span>
                </p>
                <p>
                  <span>交流贴数: {{ scope.row.post_num }}</span>
                </p>
              </div>
            </el-popover>
            <el-button type="primary"
                       plain
                       size="small"
                       v-popover:popover4>其他信息</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="update_time"
                         label="创建时间"
                         width="150">
        </el-table-column>
        <el-table-column prop="is_ban"
                         label="状态"
                         width="150">
          <template slot-scope="scope">
            <div>
              账号状态:
              <el-tag size="mini"
                      type="danger"
                      v-if="scope.row.is_ban === 1">封禁</el-tag>
              <el-tag size="mini"
                      type="success"
                      v-else-if="scope.row.is_ban === 0">正常</el-tag>
              <el-tag size="mini"
                      v-else>未知</el-tag>
            </div>
            <div>
              认证状态:
              <el-tag size="mini"
                      type="danger"
                      v-if="scope.row.user_id == 21">未认证</el-tag>
              <el-tag size="mini"
                      type="success"
                      v-else>已认证</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="delete"
                         label="封禁操作"
                         width="80">
          <template slot-scope="scope">
            <el-button @click="handleDelete(scope.row.user_id)"
                       type="danger"
                       plain
                       size="small"
                       v-if="scope.row.is_ban === 0">封禁</el-button>
            <el-button @click="handleDeleteCancel(scope.row.user_id)"
                       type="success"
                       plain
                       size="small"
                       v-else>解封</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {
  getUserinfoOrdinary,
  banUserOrdinary,
  banUserOrdinaryCancel,
} from '@/api/userinfo'
export default {
  name: 'UserinfoList',
  computed: {},
  data() {
    return {
      tableData3: [],
      attestation: [
        true,
        false
        ],
    }
  },
  methods: {
    // 获取全部普通用户信息
    getUserinfoOrdinary: function () {
      return getUserinfoOrdinary().then((res) => {
        this.tableData3.splice(0, this.tableData3.length)
        this.tableData3.push(...res.data.data.rows)
      })
    },
    handleDelete: function (user_id) {
      return banUserOrdinary({ user_id: user_id }).then((res) => {
        if (res.data.status === 200) {
          this.$message({
            showClose: true,
            message: res.data.data,
            type: 'success',
          }),
            this.getUserinfoOrdinary()
        }
      })
    },
    handleDeleteCancel: function (user_id) {
      return banUserOrdinaryCancel({ user_id: user_id }).then((res) => {
        if (res.data.status === 200) {
          this.$message({
            showClose: true,
            message: res.data.data,
            type: 'success',
          }),
            this.getUserinfoOrdinary()
        }
      })
    },
  },
  beforeMount() {
    this.getUserinfoOrdinary()
  },
}
</script>

<style lang="scss"></style>